<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>TLlist</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="@{/css/pure/pure-min.css}" />
<!--[if lte IE 8]>
   <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" th:href="@{/css/pure/grids-responsive-min.css}" />
<!--<![endif]-->
</head>
<body>
	<div id="container_app" th:if="${not #lists.isEmpty(items)}">
		<a class="pure-button pure-button-primary" href="/api/tl">开始记录</a>
		<table class="pure-table pure-table-bordered" style="width:100%">
			<thead>
				<tr>
					<td>序号</td>
					<td>列车线路</td>
					<td>站点名称</td>
					<td>开始日期</td>
					<td>方向</td>
					<td>备注</td>
					<!-- <td>状态变量</td> -->
				</tr>
			</thead>
			<tbody>
				<tr th:each="item, itemStat:${items}" th:class="${itemStat.odd}?'pure-table-odd'">
					<td th:text="${itemStat.index+1}"></td>
					<td th:text="${item.lineId}"></td>
					<td th:text="${item.stageName}"></td>
					<td th:text="${item.startDate}"></td>
					<!-- <td th:text="${item.endDate}"></td> -->
					<td th:switch="${item.direction}">
						<span th:case="1">出发</span>
						<span th:case="2">候车</span>
						<span th:case="3">到达</span>
					</td>
					<td th:text="${item.remark}"></td>
					<!-- <td th:text="${itemStat.index}"></td> -->
				</tr>
			</tbody>
		</table>
		<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
			<ul class="pure-menu-list">
				<li class="pure-menu-item"><a href="#" class="pure-menu-link">Previous</a></li>
				<li class="pure-menu-item"><a href="#" class="pure-menu-link">1</a></li>
				<li class="pure-menu-item"><a href="#" class="pure-menu-link">2</a></li>
				<li class="pure-menu-item"><a href="#" class="pure-menu-link">3</a></li>
				<li class="pure-menu-item"><a href="#" class="pure-menu-link">Next</a></li>
			</ul>
		</div>
	</div>
</body>
</html>